<template>
	<view class="goods">
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in goodsImg" :key="item.id">
					<view class="swiper-item">
						<image :src="item.src" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="info">
			<view class="wrap">
				<view class="price">
					￥{{goodsInfo.market_price}}<text>￥{{goodsInfo.sell_price}}</text>
				</view>
				<view class="title">{{goodsInfo.title}}</view>
			</view>
			<view class="detail">
				<view>货号：{{goodsInfo.goods_no}}</view>
				<view>库存：{{goodsInfo.stock_quantity}}</view>
			</view>
		</view>
		<view class="desc">
			<view class="title">详情介绍</view>
			<view class="text" v-html="goodsDesc.content"></view>
		</view>
		<view class="footer">
			<view class="left">
				<view class="item">
					<image :src="goodsNav[0].src" mode=""></image>
					<text>客服</text>
				</view>
				<view class="item">
					<image :src="goodsNav[1].src" mode=""></image>
					<text>店铺</text>
				</view>
				<view class="item" @click="handleCart($event)">
					<image :src="goodsNav[2].src" mode=""></image>
					<text>购物车</text>
					<text class="dots">12</text>
				</view>
			</view>
			<view class="right">
				<view class="cart">加入购物车</view>
				<view class="buy">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsInfo:[],
				goodsDesc:[],
				goodsImg:[],
				goodsNav:[
					{src:"https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/kefu.png"},
					{src:"https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/dianpu.png"},
					{src:"https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/carts.png"}
				],
				id:""
			}
		},
		onLoad(options) {
			//console.log(options.id)
			this.id=options.id
			this.getGoodsInfo()
			this.getGoodsDesc()
			this.getGoodsImg()
		},
		methods: {
			async getGoodsDesc(){
				const res = await this.$request({url:`/api/goods/getdesc/${this.id}`})
				this.goodsDesc=res.data.message[0]
			},
			async getGoodsInfo(){
				const res = await this.$request({url:`/api/goods/getinfo/${this.id}`})
				this.goodsInfo=res.data.message[0]
			},
			async getGoodsImg(){
				const res = await this.$request({url:`/api/getthumimages/${this.id}`})
				this.goodsImg=res.data.message
			},
			handleCart(e){
				console.log(e);
				
			}
		}
	}
</script>

<style lang="scss">
.goods{
	font-size: 16px;
}
.banner {
  swiper {
		width: 750rpx;
		height: 700rpx;
		.swiper-item {
			width: 100%;
			height: 100%;
			image {
				width: 100%;
				height: 100%;
			}
		}
  }
}

.info {
	padding: 5px;
	.wrap{
		border-bottom: 5rpx solid #ccc;
		.price {
			color: $color;
			font-size: 18px;
			padding-right: 10px;
			text{
				color: #666;
				font-size: 14px;
				text-decoration: line-through;
			}
		}
		.title {
			font-size: 14px;
			line-height: 30px;
		}
	}
	.detail{
		border-bottom: 5rpx solid #ccc;
		line-height: 30px;
	}

}

.desc {
	padding: 5px;
	padding-bottom: 100rpx;
	.title{
		border-bottom: 1px solid #ccc;
		line-height: 30px;
	}
  .text {
		width: 100%;
		p{
			font-size: 14px;
		}
  }
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100rpx;
	padding: 5px;
	background-color: #fff;
	display: flex;
  .left {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
    .item {
			width: 33.33%;
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			font-size: 12px;
      image {
				display: block;
				width: 40rpx;
				height: 40rpx;
      }

      text {
				display: block;
			}
			.dots{
				position: absolute;
				top: 0;
				right: 15px;
				width: 20px;
				height: 15px;
				line-height: 15px;
				text-align: center;
				background-color: #ff0000;
				color: #fff;
				font-size: 12px;
				border-radius: 7px;
			}
    }
  }

  .right {
		flex: 1;
		display: flex;
		font-size: 14px;
		view{
			width: 50%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 16px;
			color: #fff;
		}
    .cart {
			background-color: #ff0000;
			border-radius: 40rpx 0 0 40rpx;
    }

    .buy {
			background-color: #ffa200;
			border-radius: 0 40rpx 40rpx 0;
    }
  }
}
</style>
